<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn1">存cookie</button>
    <button class="btn2">获取cookie</button>
    <button class="btn3">删除cookie</button>
    <script>
      // 离线存储 ：通过浏览器功能来持久化保存数据
      // 1.cookie ： 小甜饼 ，就是浏览器用于存放数据的文件；
      // 如何使用？一、服务端操作cookie  二 通过客户端操作cookie；
      let btn = document.querySelector(".btn1");
      btn.onclick = function () {
        // 设置过期时间  1.设置Max-Age= 过期时间（单位是秒）
        document.cookie = "name=lisi111;Max-Age=" + 3600;
        // 2.设置  expires ：当前时间+过期时间  GTM 的字符串 ；
        let date = new Date();
        let nowTime = new Date().getTime();
        date.setTime(nowTime + 3600 * 1000);
        document.cookie = "name=shadowfiend;expires=" + date.toUTCString();
      };
      // 2.获取cookie 注意：1.cookie没有过期 2.cookie的作用域范围内 （域名、path：路径）
      let btn2 = document.querySelector(".btn2");
      btn2.onclick = function () {
        console.log(document.cookie);
      };
      // 3.删除cookie
      let btn3 = document.querySelector(".btn3");
      btn3.onclick = function () {
        document.cookie = "name=sc;Max-Age=-500";
      };
    </script>
  </body>
</html>
